import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 配置路由对象
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/home',
      component: () => import('./pages/Home'),
      children: [
        {
          path: 'news',
          component: () => import('./pages/News'),
          meta: {
            // meta中可以写任何的属性。具体根据程序员的需求决定
            // 目前我们写的isAuth表示当前路由需要进行权限管理
            isAuth: true,
            name: '新闻',
          },
        },
        {
          path: 'message',
          component: () => import('./pages/Message'),
          meta: {
            // meta中可以写任何的属性。具体根据程序员的需求决定
            // 目前我们写的isAuth表示当前路由需要进行权限管理
            isAuth: true,
            name: '信息',
          },
          children: [
            {
              name: 'd',
              path: 'detail/:id',
              component: () => import('./pages/Detail'),
              meta: {
                name: '详情',
              },
              // 独享路由守卫(只在要进入到详情页的时候生效)
              // beforeEnter(to, from, next) {
              //   // console.log('要进入详情页了', to, from)
              //   localStorage.getItem('token') ? next() : undefined
              // },
            },
          ],
        },
      ],
      meta: {
        name: '首页',
      },
    },
    {
      path: '/about',
      component: () => import('./pages/About'),
      meta: {
        name: '关于',
      },
    },
    {
      path: '/',
      redirect: '/about',
    },
  ],
})

// 配置全局路由守卫
// 全局路由守卫: 只要页面切换就会触发
// router.beforeEach((to, from, next) => {
//   // to 是目标路由的信息
//   // from 是起始路由的信息
//   // next() 执行了next才放行
//   // 简单示例: 如果登录了,才能访问message和news页面,如果没有登录,则不能访问message和news页面。 home和about可以随便访问
//   // 判断是否登录的依据就是本地缓存中是否有token

//   // 判断当前目标路由是否要进行权限管理
//   // if (to.meta.isAuth) {
//   //   const token = localStorage.getItem('token')
//   //   if (token) {
//   //     next()
//   //   }
//   // } else {
//   //   next()
//   // }

//   // 优化
//   if (to.meta.isAuth) {
//     localStorage.getItem('token') ? next() : ''
//     return
//   }
//   next()
// })

// 全局后置路由守卫
// 使用场景: 如果所有的页面切换都要做同一件事件,可以写在全局后置路由守卫中
router.afterEach((to, from) => {
  // console.log(to, from)
  // 动态的修改html页面中title的值
  // console.log(document.title)
  document.title = to.meta.name
})
export default router
